<template>
    <div class="position-management-container">
        <h2 class="page-title">职位管理</h2>

        <el-card class="table-card">
            <div class="table-header">
                <div class="table-title"></div>
                <div class="table-actions">
                    <!-- 刷新按钮 -->
                    <div class="action-item" @mouseenter="showTooltip('刷新')" @mouseleave="hideTooltip">
                        <el-button :icon="Refresh" text @click="handleRefresh" />
                        <div v-if="tooltipContent === '刷新'" class="custom-tooltip">刷新</div>
                    </div>

                    <!-- 密度设置 -->
                    <div class="action-item">
                        <el-dropdown trigger="click" @command="handleDensityChange">
                            <el-button :icon="Menu" text />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        command="default"
                                        :class="{ 'active': tableSize === 'default' }"
                                    >
                                        <el-icon v-if="tableSize === 'default'"><Check /></el-icon>
                                        默认
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="medium"
                                        :class="{ 'active': tableSize === 'medium' }"
                                    >
                                        <el-icon v-if="tableSize === 'medium'"><Check /></el-icon>
                                        中等
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="small"
                                        :class="{ 'active': tableSize === 'small' }"
                                    >
                                        <el-icon v-if="tableSize === 'small'"><Check /></el-icon>
                                        紧凑
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>

                    <!-- 列设置 -->
                    <div class="action-item">
                        <el-popover placement="bottom" width="260" trigger="click">
                            <template #reference>
                                <el-tooltip content="列设置" placement="top">
                                    <el-button :icon="Setting" text />
                                </el-tooltip>
                            </template>
                            <div class="column-settings">
                                <div class="column-header">
                                    <el-checkbox
                                        v-model="allColumnsChecked"
                                        :indeterminate="isIndeterminate"
                                        @change="handleCheckAllChange"
                                    >
                                        列显示/隐藏 (全选)
                                    </el-checkbox>
                                </div>
                                <el-divider />
                                <el-checkbox-group
                                    v-model="checkedColumns"
                                    @change="handleCheckedColumnsChange"
                                >
                                    <div
                                        v-for="column in columnOptions"
                                        :key="column.value"
                                        class="column-item"
                                    >
                                        <el-checkbox :value="column.value">
                                            {{ column.label }}
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-popover>
                    </div>
                </div>
            </div>

            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :size="tableSize"
                    v-loading="loading"
                    border
                    stripe
                    highlight-current-row
                    empty-text="暂无数据"
                >
                    <!-- 动态列 -->
                    <el-table-column
                        v-if="showColumn('id')"
                        prop="id"
                        label="序号"
                        :width="columnWidths.id"
                        align="center"
                    />
                    <el-table-column
                        v-if="showColumn('name')"
                        prop="name"
                        label="职位名称"
                        :width="columnWidths.name"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        v-if="showColumn('branch')"
                        prop="branch"
                        label="所属分行"
                        :width="columnWidths.branch"
                    />
                    <el-table-column
                        v-if="showColumn('recruiter')"
                        prop="recruiter"
                        label="招聘者"
                        :width="columnWidths.recruiter"
                    />
                    <el-table-column
                        v-if="showColumn('status')"
                        prop="status"
                        label="职位状态"
                        :width="columnWidths.status"
                        align="center"
                    >
                        <template #default="{ row }">
                            <el-tag
                                :type="statusTagType(row.status)"
                                effect="plain"
                            >
                                {{ row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-if="showColumn('postDate')"
                        prop="postDate"
                        label="发布时间"
                        :width="columnWidths.postDate"
                    />
                    <el-table-column
                        label="操作"
                        :width="columnWidths.action"
                        fixed="right"
                        align="center"
                    >
                        <template #default>
                            <el-button size="small" type="primary">编辑</el-button>
                            <el-button size="small" type="danger">下线</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh, Menu, Setting, Check } from '@element-plus/icons-vue'

// 模拟数据
const tableData = ref([
    {
        id: 1001,
        name: '前端开发工程师',
        branch: '上海分行',
        recruiter: '张经理',
        status: '招聘中',
        postDate: '2024-03-01'
    },
    {
        id: 1002,
        name: '数据分析师',
        branch: '北京分行',
        recruiter: '李主管',
        status: '已结束',
        postDate: '2024-02-15'
    }
])

const loading = ref(false)
const tableSize = ref('default')

// 列配置（带基础宽度）
const columnOptions = [
    { value: 'id', label: '序号', baseWidth: 60 },
    { value: 'name', label: '职位名称', baseWidth: 120 },
    { value: 'branch', label: '所属分行', baseWidth: 100 },
    { value: 'recruiter', label: '招聘者', baseWidth: 90 },
    { value: 'status', label: '职位状态', baseWidth: 90 },
    { value: 'postDate', label: '发布时间', baseWidth: 110 },
    { value: 'action', label: '操作', baseWidth: 140 }
]

// 列宽计算（按比例分配）
const columnWidths = computed(() => {
    const totalBaseWidth = columnOptions.reduce((sum, col) => sum + col.baseWidth, 0)
    const tableWidth = 1200 // 基准宽度
    return columnOptions.reduce((acc, col) => {
        acc[col.value] = Math.floor((col.baseWidth / totalBaseWidth) * tableWidth)
        return acc
    }, {})
})

// 列显示控制
const checkedColumns = ref(columnOptions.map(col => col.value))

// 全选/半选状态
const allColumnsChecked = computed({
    get: () => checkedColumns.value.length === columnOptions.length,
    set: (val) => {
        checkedColumns.value = val ? columnOptions.map(col => col.value) : []
    }
})

const isIndeterminate = computed(() => {
    return checkedColumns.value.length > 0 && checkedColumns.value.length < columnOptions.length
})

// 状态标签样式
const statusTagType = (status) => {
    return status === '招聘中' ? 'success' : 'info'
}

// 操作处理
const handleRefresh = () => {
    loading.value = true
    setTimeout(() => loading.value = false, 800)
}

const handleDensityChange = (size) => {
    tableSize.value = size
}

const handleCheckAllChange = (val) => {
    checkedColumns.value = val ? columnOptions.map(col => col.value) : []
}

const handleCheckedColumnsChange = (value) => {
    const checkedCount = value.length
    allColumnsChecked.value = checkedCount === columnOptions.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < columnOptions.length
}

const showColumn = (colName) => checkedColumns.value.includes(colName)
</script>

<style scoped>
.position-management-container {
    padding: 20px;
    height: 100vh;
    box-sizing: border-box;
}

/* 表格公共样式 */
.table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.table-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.table-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.action-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* 列设置样式 */
.column-settings {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 8px;
}

.column-item {
    margin: 8px 0;
    padding: 0 8px;
}

/* 自定义工具提示 */
.custom-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #303133;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .table-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .custom-tooltip {
        top: -35px;
        font-size: 11px;
        padding: 4px 8px;
    }

    .el-table__body-wrapper {
        overflow-x: auto;
    }
}

/* 状态标签 */
.el-tag {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
}
</style>